<template>
    <div>
        <Drawer title="回访数据" v-model="drawer" width="1080">
            <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading">
                <template slot-scope="{ row }" slot="name">
                    <span>{{row.name}}{{' ' + row.gender_str + ' '}}{{row.age}}岁</span>
                </template>
                <template slot-scope="{ row }" slot="content">
                    <Tooltip max-width="200" :content="row.content" placement="left">
                        <div class="isContent">{{ row.content }}</div>
                    </Tooltip>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                    :total="total"
                    :current.sync="ruleForm.page"
                    show-total
                    show-elevator
                    :page-size="ruleForm.pageSize"
                    @on-change="changePage"
                    :page-size-opts="pageOpts"
                    show-sizer transfer
                    @on-page-size-change="changePageSize"
                />
            </div>
        </Drawer>
    </div>
</template>

<script>
    import { getReportprojectDetail } from '@/api/report'
    import dayjs from 'dayjs'
    export default {
        name: 'table-list',
        data () {
            return {
                drawer: false,
                data: [],
                loading: false,
                columns: [
                    {
                        title: '姓名',
                        slot: 'name',
                        minWidth: 119
                    },
                    {
                        title: '上次复诊时间',
                        key: 'last_revisiting_time_str',
                        minWidth: 125
                    },
                    {
                        title: '下次复诊时间',
                        key: 'next_revisiting_time_str',
                        minWidth: 125
                    },
                    {
                        title: '回访内容',
                        slot: 'content',
                        minWidth: 200
                    },
                    {
                        title: '病种',
                        key: 'diseases_name',
                        minWidth: 80
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        minWidth: 90
                    },
                    {
                        title: '挂号时间',
                        key: 'reg_time_str',
                        minWidth: 125
                    },
                    {
                        title: '未到天数',
                        key: 'missed_days',
                        minWidth: 100
                    },
                    {
                        title: '总回访次数',
                        key: 'total_callback_num',
                        minWidth: 118
                    },
                    {
                        title: '回访次数​',
                        key: 'callback_num',
                        minWidth: 125
                    },
                ],
                ruleForm: {
                    project_id: '',
                    profession_id: '',
                    time: [],
                    page: 1,
                    pageSize: 10
                },
                total: 0,
                pageOpts: [10, 20, 30, 50]
            }
        },
        methods: {
            handleDrawer (row, item) {
                this.drawer = true
                this.data = []
                this.ruleForm.page = 1
                this.ruleForm.pageSize = 10
                const params = Object.assign({}, row)
                this.ruleForm = { ...this.ruleForm, ...params }
                this.ruleForm.time = item.time || []
                this.ruleForm.project_id = item.project_id || ''
                this.ruleForm.profession_id = item.profession_id || ''
                this.onLoad()
            },
            getConfig () {
                return {
                    ...this.ruleForm,
                    start_time: this.ruleForm.time[0] !== '' ? dayjs(this.ruleForm.time[0]).format('YYYY-MM-DD') : '',
                    end_time: this.ruleForm.time[1] !== '' ? dayjs(this.ruleForm.time[1]).format('YYYY-MM-DD') : ''
                }
            },
            onLoad () {
                this.loading = true
                const config = this.getConfig()
                delete config.time
                getReportprojectDetail(config).then(res => {
                    this.total = res.total
                    this.data = res.list
                }).finally(() => {
                    this.$nextTick(() => { this.loading = false })
                })
            },
            changePage (page) {
                this.ruleForm.page = page
                this.onLoad()
            },
            changePageSize (pagesize) {
                this.ruleForm.pageSize = pagesize
                this.onLoad()
            },
        }
    }
</script>

<style scoped lang="less">
.isContent {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
